<template>
  <view class="buying-warp">
<!-- #ifdef APP-PLUS -->
    <u-navbar :is-back="true" title="云购活动" :title-bold="true" :is-fixed="true" :border-bottom="false"
      :back-icon-color="'#fff'" :background="{ background: '#FF7676' }" :title-color="'#fff'" />
<!-- #endif -->
      <!-- #ifdef H5 -->
      <u-navbar
      id="navbar"
      :border-bottom="false"
      :background="{
          background: 'rgba(256,256,256, ' + navStyle.backgroundBg + ')'
      }"
      :back-bg="'rgba(255,0,0,' + navStyle.backBg + ')'"
      :back-icon-color="navStyle.backColor"
      :immersive="true"
  ></u-navbar>
  <!-- #endif -->
    <view class="goods-list" v-if="goodsList.length != 0">
      <view class="goods-item-box" v-for="(item, index) in goodsList" :key="index">
        <view class="goods-item">
          <view class="goods-img-box">
            <image :src="item.goodSimple.image" class="goods-img"></image>
          </view>
          <view class="goods-info">
            <view class="goods-name">{{ item.goodSimple.name }}</view>
            <view class="person-num">
              <view class="person-txt">{{ item.people_num }}人参与, {{ item.winner_num }}人获得</view>
            </view>
            <view class="bottom-info">
              <view class="price-info">
                <!-- <view class="origin-price">原价¥120.00</view> -->
                <view class="sale-price">价格区间：¥{{ item.goodSimple.min_price }} ~ ¥{{item.goodSimple.max_price}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="empty-box">
      <image src="/static/images/empty/shop.png" class="empty-img"></image>
      <view>~ 暂无抢购活动 ~</view>
    </view>
  </view>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'
import {
  apiBuyMyList
} from '@/api/goods'
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      goodsList: [],
      mescroll: null,
      downOption1: {  //上拉加载下一页
        auto: true,
      },
      upOption1: {
        textNoMore: "我是有底线的 >_<",
        auto: false,
        page: {
          num: 0,    //起始页
          size: 10,  //一页条数
        }
      },
      searchForm1: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      timestamp: 66400,
      show: false,
      title: '提示',
      content: '确定要发起这个云购活动吗?',
      tempId: null,
      navStyle: {
        backBg: 0.4,
        backgroundBg: 0,
        backColor: 'rgba(256,256,256,1)'
      },
    }
  },
  onLoad() {
    this.getData();
    console.log(this.getUser());
  },
  mounted() {
    // this.$refs.countDown.start();
  },
  methods: {
    ...mapActions(["getUser"]),
    onPullDownRefresh() {
      this.getData();
    },
    handleClickBtn(item) {
      console.log(item);
      this.tempId = item.id;
      console.log(this.tempId);
      this.show = true;
    },
    cancel() {
      this.show = false;
    },
    onChange(e) {
      this.timeData = e
    },
    // 上拉刷新回调
    upCallback1(page) {
      let pageNum = page.num; // 页码, 默认从1开始
      let pageSize = page.size; // 页长, 默认每页10条
      this.searchForm1.page = pageNum;
      this.getData();
    },

    // 上拉加载回调
    downCallback1(mescroll) {
      console.log("downcallback")
      //重置列表为第一页(自动执行page.num=1，再触发upcallback方法)
      mescroll.resetUpScroll();
    },

    // 初始化滚动插件
    mescrollInit1(mescroll) {
      console.log(mescroll);
      this.mescroll = mescroll;
    },

    getData() {
      uni.showLoading({
        mask: true,
        title: '数据加载中...'
      })
      apiBuyMyList().then(res => {
        console.log(res);
        uni.hideLoading();
        uni.stopPullDownRefresh();
        this.goodsList = res;
      })
    },

  },
}
</script>
<style lang="scss" scoped>
.buying-warp {
  // overflow: auto;
  /* position: relative; */
  height: 100vh;
  background-color: #F5F5F5;
  // overflow: hidden;
  color: #333;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.card-container {
  background: #fff;
  height: 300rpx;
  margin: 30rpx;
  border-radius: 20rpx;
}

.card-list {
  padding-top: 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-item {
  text-align: center;
}

.card-txt {
  font-size: 20px;
  font-weight: 600;
  color: #ff9500
}

.card-txt2 {
  font-size: 16px;
  color: #71767e;
}

.bottom-btn {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  height: 120rpx;
  box-shadow: #71767e 0px 0px 10px;
  display: flex;
  padding: 0 30rpx;
}

// .btn {
//   flex: 1;
//   height: 80rpx;
//   background: #ff4d4f;
//   border-radius: 60rpx;
//   text-align: center;
//   line-height: 80rpx;
//   color: #fff;
//   margin-top: 20rpx;
// }

.btn1 {
  flex: 1;
  height: 80rpx;
  border-radius: 60rpx;
  background: #1890ff;
  text-align: center;
  line-height: 80rpx;
  color: #fff;
  margin: 20rpx 0 0rpx 20rpx;
}

.goods-list {
  margin: 30rpx 20rpx 30rpx;

}

.goods-item-box {
  width: 100%;
  min-height: 280rpx;
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
}

.goods-item {
  display: flex;
  justify-content: flex-start;
}

.goods-img {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
}

.goods-img-box {
  width: 200rpx;
}

.goods-info {
  margin-left: 20rpx;
  width: 100%;
}

.goods-name {
  font-size: 30rpx;
  color: #010101;
  font-weight: 600;
}

.goods-spec {
  font-size: 28rpx;
  color: #010101;
  margin: 10rpx 0;
}

.person-num {
  height: 33rpx;
  border-radius: 20rpx;
  display: flex;
  justify-content: flex-start;
  margin: 10rpx 0 20rpx;
}

.person-img {
  width: 30rpx;
  height: 30rpx;
}

.person-txt {
  color: #f4020e;
  line-height: 33rpx;
  font-size: 24rpx;
  margin-left: 10rpx;
}

::v-deep .uni-progress-bar {
  border-radius: 10px;
}

::v-deep .uni-progress-inner-bar {
  border-radius: 10px;
  // overflow: hidden;
}

::v-deep .uni-progress-info {
  color: #f4020e
}

.bottom-info {
  display: flex;
  justify-content: space-between;
}

.origin-price {
  color: #b1b1b1;
  text-decoration: line-through;
  font-size: 24rpx;
}

.sale-price {
  color: #f42d42;
  font-size: 28rpx;
  font-weight: 600;
}

.price-info {
  float: left;
}

.btn {
  margin-top: 20rpx;
  width: 145rpx;
  height: 60rpx;
  background: #ff4d4f;
  border-radius: 10rpx;
  text-align: center;
  line-height: 60rpx;
  font-size: 30rpx;
  color: #fff;
}

.line {
  margin-top: 20rpx;
  border-top: 1rpx solid #eee;
}

.clock-txt {
  color: #ff4d4f;
  display: flex;
  margin-top: 20rpx;
  font-size: 26rpx;
}

.clock-txt text {
  display: inline-block;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.empty-img {
  width: 240rpx;
  height: 240rpx;  
}

.empty-box {
  text-align: center;
  margin-top: 200rpx;
  font-size: 26rpx;
  color: #7a7474;
}

// #ifdef H5 
::v-deep .u-back-wrap {
  background: rgba(145, 141, 141, 0.4);
  border-radius: 50%;
  text-align: center;
  padding: 7px 7px 7px 8px;
  margin-top: 40rpx;
  margin-left: 40rpx;
}
// #endif
</style>